<template>
  <MyDialog
    v-model="isVisible"
    :type="type"
    class="audit-dialog-wrapper"
    width="1300"
    :dialog-title="dialogTitle"
    :need-modal="needModal"
    @closed="closed"
  >
    <my-form ref="queryFormRef" v-model:modelValue="dataForm" :model="dataForm" :items-datas="itemsDatas">
      <my-button type="reset" title="重置" @click="resetQuery" />
      <my-button type="search" title="查询" :loading="loading" @click="handleQuery" />
    </my-form>
    <MyTitle title-name="人员信息列表" :title-need-handle="true">
      <template #tools>
        <my-button type="export" title="导出" @click="handleExport" />
      </template>
    </MyTitle>
    <my-table v-loading="loading" :columns="columns" :table-data="tableData" class="exportTable" @selection-change="handleSelectionChange">
      <template #grmx01="scope">
        <span v-if="scope.row.ryType === 1">已缴</span>
        <span v-if="scope.row.ryType === 2">未缴</span>
      </template>
      <template #refStatus="scope">
        <span v-if="scope.row.refStatus === 0">未退费</span>
        <span v-if="scope.row.refStatus === 1">已退费</span>
      </template>
      <template #ryType="scope">
        <span v-if="scope.row.ryType === 1">在职</span>
        <span v-if="scope.row.ryType === 2">离职</span>
        <span v-if="scope.row.ryType === 3">异动</span>
      </template>
    </my-table>
    <pagination v-model:page="dataForm.pageNum" v-model:limit="dataForm.pageSize" :total="total" style="margin-top: 10px" @pagination="getList" />
    <template #footer>
      <my-button type="reset" title="关闭" @click="closed" />
    </template>
  </MyDialog>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { listAb04 } from '@/api/yuanshidian/ab04';
import { listAb02 } from '@/api/yuanshidian/ab02';
const { proxy } = getCurrentInstance();
const props = defineProps(
  {
    dialogTitle: {
      type: String,
      default: '弹窗标题'
    },
    needModal: {
      type: Boolean,
      default: true
    },
    modelValue: {
      type: Boolean,
      default: false
    },
    currentRow: {
      type: Object,
      default: () => {}
    }
  },
  ['modelValue']
);
const buttonLoading = ref(false);
const loading = ref(false);
const total = ref(0);
const ids = ref([]);
const queryFormRef = ref<ElFormInstance>();
const state = reactive({
  itemsDatas: [{ label: '姓名', prop: 'gr04', type: 'input' }],
  dataForm: {
    pageNum: 1,
    gr04: '',
    delStatus: 0,
    pageSize: 10
  },
  tableData: [],
  columns: [
    { label: '序号', type: 'index', width: '55', prop: 'index' },
    { type: 'selection' },
    { label: '个人编号', prop: 'gr01', align: 'center' },
    { label: '身份证号码', prop: 'gr02', align: 'center', width: '100px' },
    { label: '姓名', prop: 'gr04', align: 'center', width: '90px' },
    { label: '状态', prop: 'ryType', align: 'center', type: 'custom', slot: 'ryType' },
    { label: '结算开始月', prop: 'gr10', align: 'center', width: '100px' },
    { label: '结算截至月', prop: 'yd08', align: 'center', width: '100px' },
    { label: '缴费月数', prop: 'gr14', align: 'center', width: '100px' },
    { label: '个人缴费本息', prop: 'grjfbx', align: 'center', width: '130px' },
    { label: '个人账户本息', prop: 'grzhbx', align: 'center', width: '130px' },
    { label: '缴费临时身份编制', prop: 'jfssfbz', align: 'center', width: '130px' },
    { label: '退费状态', prop: 'refStatus', align: 'center', type: 'custom', slot: 'refStatus' }
  ]
});
const { itemsDatas, tableData, columns, dataForm } = toRefs(state);
const isVisible = ref(false);
watch(
  () => props.modelValue,
  async (v) => {
    isVisible.value = v;
    if (props.currentRow.id && v) {
      getList();
    }
  },
  { immediate: true, deep: true }
);
/** 搜索按钮操作 */
const handleQuery = () => {
  dataForm.value.pageNum = 1;
  getList();
};

/** 重置按钮操作 */
const resetQuery = () => {
  queryFormRef.value?.resetFields();
  handleQuery();
};
//列表初始化
const getList = async () => {
  loading.value = true;
  dataForm.value.dw01 = props.currentRow.dw01;
  dataForm.value.refStatus = 0;
  var res = await listAb02(dataForm.value);
  tableData.value = res.rows;
  total.value = res.total;
  loading.value = false;
};
/** 多选框选中数据 */
const handleSelectionChange = (selection) => {
  ids.value = selection.map((item) => item.id);
  multiple.value = !selection.length;
};
/** 搜索按钮操作 */
const search = () => {
  queryParams.value.pageNum = 1;
  getList();
};
/** 导出按钮操作 */
const handleExport = () => {
  proxy?.download(
    'yuanshidian/ab04/exportab04tf',
    {
      ...dataForm.value,
      dw01: props.currentRow.dw01,
      splitID: ids.value.length > 0 ? ids.value.join(',') : ''
    },
    `试点期间参保人员退费确认表_${new Date().getTime()}.xlsx`
  );
};
const emit = defineEmits(['update:modelValue']);
const closed = () => {
  emit('update:modelValue');
  queryFormRef.value?.resetFields();
};
</script>
<style scoped lang="scss"></style>
